<template>
  <div id="about">
    <header>
      <!-- 最上方的导航栏 -->
      <div class="highest">
        <ul>
          <li v-if='$store.state.user==null'>
            <span class="login" @click="loginBtn()">登录</span>|
            <span class="register" @click="registerVisible=true">注册</span>
          </li>
          <li v-if='$store.state.user!==null'>
            <span style="cursor:default;">欢迎</span>
            <el-popover
              placement="top"
              width="160"
              v-model="visible">
              <p>你确定退出吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                <el-button type="primary" size="mini" @click="quitLogin">确定</el-button>
              </div>
              <span slot="reference">{{$store.state.user.userName}}</span>
            </el-popover>
            
          </li>
          <li><span class="myOrder" @click='order'>我的订单</span></li>
          <li><span @click='collect'>我的收藏</span></li>
          <li @click='shopping'>
            <i class="el-icon-shopping-cart-full"></i>购物车(<span>{{$store.state.lang}}</span>)
          </li>
        </ul>
      </div>
      <!-- 标签页那一排的盒子 -->
      <div class="navigationBar">
        <!-- logo图片 -->
        <img src="@/assets/img/logo.png" alt="" class="logo" />
        <!-- 标签页 -->
        <div class="labelPage">
          <el-menu
            :default-active="$route.path"
            class="el-menu-demo"
            mode="horizontal"
            router
          >
            <el-menu-item index="/about/home">首页</el-menu-item>
            <el-menu-item index="/about/allGoods">全部商品</el-menu-item>
            <el-menu-item index="/about/aboutUs">关于我们</el-menu-item>
          </el-menu>
        </div>
        <!-- 搜索框 -->
        <div class="searchBox">
          <el-input
            placeholder="请输入搜索内容"
            v-model="search"
            class="input-with-select"
            @change="searchData"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchData"
            ></el-button>
          </el-input>
        </div>
      </div>
    </header>
    <!-- 中间的主要内容 -->
    <section>
      <keep-alive>
        <router-view />
      </keep-alive>
    </section>
    <!-- 底部 -->
    <footer>
      <div class="bottom1">
        <ul>
          <li><span class="sprite"></span>七天无理由退换货</li>
          <li><span class="sprite"></span>满99元全场免邮</li>
          <li><span class="sprite"></span>100%品质保障</li>
        </ul>
      </div>
      <div class="bottom2">
        <img src="@/assets/img/github.png" alt="" />
        <ul>
          <li>首页</li>
          <li>|</li>
          <li>全部商品</li>
          <li>|</li>
          <li>关于我们</li>
        </ul>
        <p>商城版权所有©2012-2021</p>
      </div>
    </footer>
    <!-- 登录的对话框 -->
    <login></login>
    <!-- 注册的对话框 -->
    <el-dialog title="注册" :visible.sync="registerVisible" width="30%" center>
      <el-form
        :model="registerForm"
        status-icon
        :rules="registerRules"
        ref="registerForm"
        class="demo-ruleForm"
      >
        <el-form-item prop="username">
          <el-input
            v-model="registerForm.username"
            prefix-icon="el-icon-user"
            placeholder="输入用户民"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="registerForm.password"
            prefix-icon="el-icon-view"
            placeholder="输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="topassword">
          <el-input
            type="password"
            v-model="registerForm.topassword"
            prefix-icon="el-icon-view"
            placeholder="确定密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('registerForm')"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import login from '../miAPI/login'
export default {
  data() {
    var reg = /^[a-zA-Z]([-_a-zA-Z0-9]{5,17})$/;
    var userReg = /^[a-zA-Z]([-_a-zA-Z0-9]{4,16})$/;
    //密码的验证
    var validatePass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入密码"));
      } else if (reg.test(value) == false) {
        callback(new Error("字母开头,长度6-18之间,允许字母数字下划线"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.registerForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    //用户名的表单验证
    var validateUser = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else if (userReg.test(value) == false) {
        callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      }else{
        callback()
      }
    };
    return {
      search: "",
      loginVisible: false,
      //注册的表单绑定数据
      registerForm: {
        username: "",
        padding: "",
        topassword: "",
      },
      registerVisible: false, // 注册盒子的标识
      //注册的表单验证
      registerRules: {
        username: [{ validator: validateUser, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        topassword: [{ validator: validatePass2, trigger: "blur" }],
      },
      visible: false,
    };
  },
  methods: {
    // 搜索框
    searchData() {
      // 把数据通过路由传到AllGoods组件中
      // console.log(this.search)
      this.$router.push({
        path: "/about/allGoods",
        query: { search: this.search },
      });
      this.search = "";
    },
    // 注册按钮
    submitForm(form){
      this.$refs[form].validate(async (valid) => {
          if (valid) {
            let {data:res} = await login.FindUserName({userName:this.registerForm.username})
            if(res.code=='001'){
              let {data:key} = await login.Register({userName:this.registerForm.username,password:this.registerForm.password})
              // console.log(key)
              if(key.code=='001'){
                this.registerVisible = false
                this.$notify({
                  type:"success",
                  title: '提示',
                  message: '注册成功',
                  duration:3000
                });
                this.registerForm = {
                  username: "",
                  padding: "",
                  topassword: "",
                }
              }
            }else{
              this.$notify({
                type:"error",
                title: '警告',
                message: '该用户名已被注册',
                duration:3000
              });
            }
          } else {
            // 右侧的消息通知
            this.$notify({
              type:"error",
              title: '警告',
              message: '请正确填写表单',
              duration:3000
            });
            return false;
          }
        });
    },
    loginBtn(){
      this.$store.commit('setlogin')
    },
    quitLogin(){
      this.$store.commit('quitLogin')
      this.$notify({
        type:"success",
        title: '成功',
        message: '退出成功',
        duration:3000
      });
      this.visible = false
    },
    order(){
      if(this.$store.state.user == null){
        this.$store.commit('setlogin')
        return
      }
      this.$router.push("/about/order")
    },
    collect(){
      if(this.$store.state.user == null){
        this.$store.commit('setlogin')
        return
      }
      this.$router.push("/about/collect")
    },
    shopping(){
      if(this.$store.state.user == null){
        this.$store.commit('setlogin')
        return
      }
      this.$router.push("/about/shopping")
    }
  },
};
</script>

<style lang="scss">
header {
  width: 100%;
  height: 138px;
  .highest {
    width: 100%;
    height: 46px;
    background: #3d3d3d;
    padding-right: 8%;
    & > ul {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      list-style: none;
      height: 100%;
      line-height: 46px;
      // margin-left:30%;
      li {
        padding: 0 14px;
        color: #b0b0b0;
        & > span {
          cursor: pointer;
          font-size: 14px;
        }
        span:hover {
          color: #fff;
          transition: 0.5s;
        }
      }
      li:last-child {
        cursor: pointer;
      }
      li:last-child:hover {
        background: #ff6700;
        color: #fff;
        transition: 0.5s;
      }
    }
  }
  .navigationBar {
    width: 84%;
    height: 92px;
    margin-left: 8%;
    padding-top: 31px;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    .searchBox {
      padding-top: 8px;
      .input-with-select {
        width: 300px;
      }
    }
  }
}
footer {
  width: 100%;
  height: 382px;
  background: #2f2f2f;
  border-top: 32px solid #fff;
  .bottom1 {
    padding: 0 8%;
    width: 100%;
    height: 168px;
    & > ul {
      width: 100%;
      height: 100%;
      line-height: 168px;
      display: flex;
      justify-content: space-evenly;
      list-style: none;
      li {
        color: #fff;
        font-size: 22px;
        display: flex;
        align-items: center;
        .sprite {
          display: inline-block;
          width: 32px;
          height: 42px;
          background: url("../assets/img/us-icon.png") no-repeat 0 0;
          cursor: pointer;
        }
      }
    }
  }
  .bottom2 {
    width: 100%;
    height: 182px;
    border-top: 1px solid #3d3d3d;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    color: #888888;
    & > img {
      width: 54px;
      height: 54px;
      cursor: pointer;
    }
    & > ul {
      width: 300px;
      display: flex;
      list-style: none;
      justify-content: space-between;
      li {
        cursor: pointer;
      }
    }
  }
}
</style>
